import React from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Line } from '@ant-design/plots';
import { Col, Progress, Row, Tooltip } from 'antd';
import numeral from 'numeral';
import type { DataItem } from '../data.d';
import useStyles from '../style.style';
import { ChartCard, Field } from './Charts';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 24,
  style: {
    marginBottom: 24,
  },
};

interface IntroduceRowProps {
  loading: boolean;
  visitData1: DataItem[];
  visitData2?: DataItem[];
  title1?: string;
  title2?: string;
}

const IntroduceRow: React.FC<IntroduceRowProps> = ({ 
  loading, 
  visitData1, 
  visitData2, 
  title1 = 'UV访问量', 
  title2 = 'PV访问量' 
}) => {
  const { styles } = useStyles();
  console.log(visitData2,'-visitData2visitData2')
  console.log(visitData1,'visitData1')
  const chartConfig = {
    height: 150,
    padding: 'auto',
    xField: 'x',
    yField: 'y',
    shapeField: 'smooth',
    // color: ['#F99022', '#2FC25B'], // 对应seriesField中的值
    // color: '#F99022',
    axis: {
      x: {
        label: {
          autoRotate: true,
        },
      },
      y: {
        title: {
          text: '数值',
        },
      },
    },
    tooltip: {
      domainField: 'x',

      items: [

      ].filter(Boolean)
    },
    interactions: [
      { type: 'tooltip' },
      { type: 'element-highlight' }
    ]
  };

  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          loading={loading}
          title={'PVUV访问量'}
          contentHeight={150}
        >
          <Line
          
            {...chartConfig}
            data={
              visitData2 
                ? [
                    ...visitData2.map(item => ({ ...item, type: title1 ,color: 'PV'})), 
                    ...visitData1.map(item => ({ ...item, type: title2, color: 'UV' }))
                  ]
                : visitData1
            }
            colorField="color"
            seriesField="type"
          />
        </ChartCard>
      </Col>
    </Row>
  );
};

export default IntroduceRow;